<template>
  <div class="Header">
    总数：{{ autoRouter.length-1 }}
    <el-collapse v-model="activeNames">
      <el-collapse-item
        v-for="(item, index) in treeOption"
        :key="index + '11'"
        :title="item.label"
        :name="index"
      >
        <div
          class="cursor-pointer"
          v-for="(item2, index) in item.children"
          :key="index + '22'"
          @click="HandelOpen(item2.path)"
        >
          {{ item2.title }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const treeWrapper = {};
const router = useRouter();
const autoRouter = router.options.routes.filter((item) => item.name);

autoRouter.forEach((item) => {
  const pathArray = item.path.split("/");
  console.log(pathArray[3], "mm2");

  if (pathArray[3]) {
    if (!treeWrapper[pathArray[3]]) {
      treeWrapper[pathArray[3]] = {
        disabled: false,
        key: pathArray[3],
        label: pathArray[3],
        children: [],
      };
    }
    treeWrapper[pathArray[3]].children.push({
      ...item,
      key: item.path,
      label: item.name,
    });
  }
});

const treeOption = Object.values(treeWrapper);
// console.log(treeOption, "11");

const HandelOpen = (option) => {
  if (option) router.push({ path: option });
};
const activeNames = ref(["1"]);
</script>
<style lang="scss" scoped>
.Header {
  width: 150px;
  height: 800px;
  color: rgb(7, 7, 7);
  position: fixed;
  top: 0;
  // background-color: #000;
  font-size: 23px;
  line-height: 60px;
  padding-inline: 0px;
  overflow: hidden;
  overflow-y: scroll;
  left: 5px;
}
</style>
